<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    在form表单里的button，如果点击了，默认会执行提交行为<br>
    <form action="#">
        
        <button>提交</button>
    </form>

    a标签点击了默认会跳转到对应的链接<br>
    <a href="https://www.baidu.com">去百度</a><br>

    这样的默认行为是浏览器执行的。当我们点击表单内部type为submit的button后，form会收到一个submit类型的事件对象。该对象里面有一个属性叫这样的默认行为是浏览器执行的。当我们点击表单内部type为submit的button后，form会收到一个submit类型的事件对象。该对象里面有一个属性叫defaultPrevented，默认是true。，默认是true。<br>

    这个事件会冒泡向上传递，最终传递到浏览器，浏览器获得该事件后，会判断事件是否有默认动作，以及事件的defaultPrevented属性是否是false，来决定是否触发默认动作。<br>
    因此，我们只需要在事件传递过程中，不论哪个元素上，把defaultPrevented改成true，就能阻止默认事件的发生。

<script>
    let form = document.querySelector("form")
    form.addEventListener("submit", function(e) {
        // 此时是false
        console.log(e.defaultPrevented)
        // e.preventDefault()
    })

    document.addEventListener("submit", function(e) {
        // 还是false
        console.log(e.defaultPrevented)
        e.preventDefault()

        // 变成true，能阻止默认事件发生
        console.log(e.defaultPrevented)
    })

    

    let a = document.querySelector("a")
    // 直接在a标签上阻止默认事件
    a.addEventListener("click", function(e) {
        e.preventDefault()
    })

    // 在document上也能阻止，这样的话所有click都不能进行跳转
    document.addEventListener("click", function(e) {
        e.preventDefault()
    })
</script>

</body>
</html>